import React from 'react'
import {NavLink} from 'react-router-dom'
import { connect } from 'react-redux'
import classnames from 'classnames'
import './numberPadStyle.less'

const mapStateToProps = (state) => {
  return {
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    openModal: (msg) => dispatch(global.allActions.appActions.openModal(msg))
  }
}
class NumberPad extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      complete: []
    }
  }

  public componentDidMount() {

  }

  numberClicked(number) {
    console.log(number);
    const {complete} = this.state
    const copy = [...complete]
    if (number === -1) {
      this.setState({complete: _.dropRight(copy)})
    } else {
      if (copy.length >= 6) {
        return
      }
      if (copy.length === 5) {
        copy.push(number)
        this.setState({complete: copy})
        this.join(copy)
      } else if (copy.length < 5) {
        copy.push(number)
        this.setState({complete: copy})
      }
    }
  }

  join(copy) {
    let send = { roomNo: copy.join('') }
    const url = `${config.pre}/crowd/room/join/${Cookies.get('areaCode')}`
    const opt = {
      method: 'POST',
      body: JSON.stringify(send)
    }
    fetchJson(url, opt).then(data => {
      this.props.close()
      if (data.result == 100) {
            window.location.href = '#/Mall'
          }
      if (data.result) {
        this.props.openModal( data.message)
        return
      }
      window.location.href = data.data
    })
  }

  public render() {
    const {currentGame, confClicked, createGame, close} = this.props
    const {complete} = this.state
    const showComplete = [...complete]
    if (showComplete.length < 6) {
      const pushNum = 6 - showComplete.length
      for (let i = 0; i < pushNum; i ++) {
        showComplete.push('-')
      }
    }
    return (
      <div className="dialog-block has-mask full">
        <div className="empty" onClick={close}>
        </div>
        <div className="number-pad text-center animated fadeIn">
        <img src="img/app/numpad/keyboard-bg.png" alt="" className="keyboard-bg"/>
          <div className="complete pure-g">
            {
              showComplete.map((com, index) => (
                <div className="pure-u-1-6" key={index}>
                  <span className="input-num mtr-8">{com}</span>
                </div>
              ))
            }
          </div>
          <div className="keyboard">
            <table className="pure-table-horizontal full">
              <tbody>
                <tr>
                  <td>
                    <button  onClick={this.numberClicked.bind(this, 1)} className="number-btn">
                      {/* <img  src="img/app/numpad/num-btn.png" alt=""/> */}
                      <span className="number">1</span>
                    </button>
                  </td>
                  <td>
                    <button  onClick={this.numberClicked.bind(this, 2)} className="number-btn">
                      <span className="number">2</span>
                    </button>
                  </td>
                  <td>
                    <button  onClick={this.numberClicked.bind(this, 3)} className="number-btn">
                      <span className="number">3</span>
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <button  onClick={this.numberClicked.bind(this, 4)} className="number-btn">
                      {/* <img  src="img/app/numpad/num-btn.png" alt=""/> */}
                      <span className="number">4</span>
                    </button>
                  </td>
                  <td>
                    <button  onClick={this.numberClicked.bind(this, 5)} className="number-btn">
                      <span className="number">5</span>
                    </button>
                  </td>
                  <td>
                    <button  onClick={this.numberClicked.bind(this, 6)} className="number-btn">
                      <span className="number">6</span>
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <button  onClick={this.numberClicked.bind(this, 7)} className="number-btn">
                      {/* <img  src="img/app/numpad/num-btn.png" alt=""/> */}
                      <span className="number">7</span>
                    </button>
                  </td>
                  <td>
                    <button  onClick={this.numberClicked.bind(this, 8)} className="number-btn">
                      <span className="number">8</span>
                    </button>
                  </td>
                  <td>
                    <button  onClick={this.numberClicked.bind(this, 9)} className="number-btn">
                      <span className="number">9</span>
                    </button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <button  onClick={close} className="number-btn back-btn">
                    <span className="number">
                      <img  className="clear" src="img/app/numpad/back.png" alt=""/>
                    </span>
                    </button>
                  </td>
                  <td>
                    <button  onClick={this.numberClicked.bind(this, 0)} className="number-btn">
                      <span className="number">0</span>
                    </button>
                  </td>
                  <td>
                    <button  onClick={this.numberClicked.bind(this, -1)} className="number-btn">
                    <span className="number">
                      <img  className="clear" src="img/app/numpad/clear.png" alt=""/>
                    </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    )
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(NumberPad)